import { useEffect, useState } from 'react';
import styles from './Atag.less';
import { tag_item } from '@/utils/tag';
import { useDispatch, useSelector, useHistory } from 'umi';
import { labelItem, listItem, tagslistItem } from '@/utils/Article';
import ArticleItem from "@/components/ArticleItem"
import RightTop from '@/components/rightTop';
import ArticleBottom from '@/components/ArticleBottom';
const tag: React.FC = (props, { hist }) => {
    //传过来的值
    let History = useHistory();
    const state = useSelector((state: { Atag: any }) => state.Atag)
    const dispatch = useDispatch()
    const [CarInd, setCarInd] = useState(0)


    useEffect(() => {
        dispatch({
            type: "Atag/gettags"
        }),
            dispatch({
                type: 'Atag/readinglist'
            });
        dispatch({
            type: 'Atag/getlabel'
        });
        dispatch({
            type: "Atag/getDetaillist",
            payload: {
                value: "fe"
            }
        })
    }, [])
    return <div className={styles.tag_wrap}>
        <div className={`${styles.main} ${styles.left}`}>

            {/* 头部显示 */}
            <div className={`${styles.left_Header} ${styles.main_border}`}>
                <p>
                    与 <span>{state.tagslist.length > 0 ? state.tagslist[CarInd].label : ""}</span> 标签有关的文章
                </p>

                <p>
                    共搜索到 <span>{state.tagslist.length > 0 ? state.tagslist[CarInd].articleCount : ""}</span> 篇
                </p>
            </div>

            {/* tab切换 */}
            <div className={`${styles.tab} ${styles.main_border}`}>
                <h5>
                    文章标签
                </h5>

                <div className={styles.tab_Box}>
                    <span onClick={() => {
                        History.push("/page/Article")
                    }} >所有</span>
                    {

                        state.tagslist.map((item: tagslistItem, index: number) => {
                            return <span key={index}
                                onClick={() => {
                                    state.tagslist[index]
                                        ? setCarInd(index)
                                        : ""
                                    dispatch({
                                        type: "Atag/getDetaillist",
                                        payload: {
                                            value: item.value
                                        }
                                    })
                                }}
                                className={`${CarInd == index
                                    ? styles.Tab_Active
                                    : ''
                                    }`}
                            >{item.label} </span>
                        })
                    }
                </div>
            </div>

            <div className={`${styles.left_main} ${styles.main_border}`}>
                {
                    state.articlelist.map((item: listItem, index: number) => {
                        return <ArticleItem item={item} key={index} />
                    })
                }
            </div>
        </div>

        <div className="right">
            <div className="right_top">
                <h3>推荐阅读</h3>
                {
                    state.readList && state.readList.map((item: listItem, index: number) => {
                        return <RightTop key={index} item={item} />
                    })
                }
            </div>
            <div className="right_bottom">
                <h3>文章标签</h3>
                <div className="bottomitem">
                    {
                        state.labellist.map((item: labelItem, index: number) => {
                            return <ArticleBottom item={item} key={index} />
                        })
                    }
                </div>
            </div>
        </div>


    </div>
}

export default tag